<title>bootstrap卡片</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">bootstrap卡片</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">基本元素</a></li>
	 				<li class="breadcrumb-item active">bootstrap卡片</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body"><!-- Header footer section start -->
<section id="header-footer">
	<div class="row match-height">
		<div class="col-xl-4 col-md-6">
			<div class="card">
				<div class="card-body">
					<h4 class="card-title">Basic Card</h4>
					<h6 class="card-subtitle text-muted">Basic Card With Header & Footer</h6>
				</div>
				<img class="img-fluid" src="assets/images/carousel/22.jpg" alt="Card image cap">
				<div class="card-body">
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					<a href="#" class="card-link">Card link</a>
					<a href="#" class="card-link">Another link</a>
				</div>
				<div class="card-footer border-top-blue-grey border-top-lighten-5 text-muted">
					<span class="float-left">3 hours ago</span>
					<span class="float-right">
						<a href="#" class="card-link">Read More
							<i class="la la-angle-right"></i>
						</a>
					</span>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-md-6">
			<div class="card">
				<div class="card-body">
					<h4 class="card-title">Video Embed</h4>
					<h6 class="card-subtitle text-muted">Video Embed Card With Header & Footer</h6>
				</div>
				<div class="embed-responsive embed-responsive-item embed-responsive-4by3">
					<iframe class="img-thumbnail" src="https://www.youtube.com/embed/H6J5wdZUxck?rel=0&amp;controls=0&amp;showinfo=0" allowfullscreen></iframe>
				</div>
				<div class="card-body">
					<p class="card-text">Candy cupcake sugar plum oat cake wafer marzipan jujubes lollipop macaroon.</p>
					<a href="#" class="card-link">Card link</a>
					<a href="#" class="card-link">Another link</a>
				</div>
				<div class="card-footer border-top-blue-grey border-top-lighten-5 text-muted">
					<span class="float-left">1 day ago</span>
					<span class="tags float-right">
						<span class="badge badge-pill badge-success">Technology</span>
						<span class="badge badge-pill badge-warning">Gaming</span>
					</span>
				</div>
			</div>
		</div>

		<div class="col-xl-4 col-md-12">
			<div class="card">
				<div class="card-body">
					<h4 class="card-title">Carousel</h4>
					<h6 class="card-subtitle text-muted">Carousel Card With Header & Footer</h6>
				</div>
				<div id="carousel-area" class="carousel slide" data-ride="carousel">
					<ol class="carousel-indicators">
						<li data-target="#carousel-area" data-slide-to="0" class="active"></li>
						<li data-target="#carousel-area" data-slide-to="1"></li>
						<li data-target="#carousel-area" data-slide-to="2"></li>
					</ol>
					<div class="carousel-inner" role="listbox">
						<div class="carousel-item active">
							<img src="assets/images/carousel/23.jpg" class="d-block w-100" alt="First slide">
						</div>
						<div class="carousel-item">
							<img src="assets/images/carousel/22.jpg" class="d-block w-100" alt="Second slide">
						</div>
						<div class="carousel-item">
							<img src="assets/images/carousel/24.jpg" class="d-block w-100" alt="Third slide">
						</div>
					</div>
					<a class="carousel-control-prev" href="#carousel-area" role="button" data-slide="prev">
						<span class="la la-angle-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="carousel-control-next" href="#carousel-area" role="button" data-slide="next">
						<span class="la la-angle-right icon-next" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
				<div class="card-body">
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					<a href="#" class="card-link">Card link</a>
					<a href="#" class="card-link">Another link</a>
				</div>
				<div class="card-footer border-top-blue-grey border-top-lighten-5 text-muted">
					<span class="float-left">2 days ago</span>
					<span class="tags float-right">
						<span class="badge badge-pill badge-primary">Branding</span>
						<span class="badge badge-pill badge-danger">Design</span>
					</span>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Header footer section end -->

<!-- Content types section start -->
<section id="content-types">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Content Types</h4>
			<p>Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple
				content types to create the card you need.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-content">
					<div class="card-body">
						<h4 class="card-title">List Group</h4>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">
							<span class="badge badge-default badge-pill bg-primary float-right">4</span>
							Cras justo odio
						</li>
						<li class="list-group-item">
							<span class="badge badge-default badge-pill bg-info float-right">2</span>
							Dapibus ac facilisis in
						</li>
						<li class="list-group-item">
							<span class="badge badge-default badge-pill bg-warning float-right">1</span>
							Morbi leo risus
						</li>
						<li class="list-group-item">
							<span class="badge badge-default badge-pill bg-success float-right">3</span>
							Porta ac consectetur ac
						</li>
						<li class="list-group-item">
							<span class="badge badge-default badge-pill bg-danger float-right">8</span>
							Vestibulum at eros
						</li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link">Card link</a>
						<a href="#" class="card-link">Another link</a>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-content">
					<div class="card-body">
						<h4 class="card-title">Collapse</h4>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					</div>
					<div id="accordion">
						<div class="card collapse-icon panel mb-0 box-shadow-0 border-0">
							<div class="card-header border-bottom-blue-grey border-bottom-lighten-4" id="headingOne">
								<a href="#" class="h6 blue" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</a>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
								<div class="card-body">
									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
									non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
									aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
									craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
									occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
									labore sustainable VHS.
								</div>
							</div>
							<div class="card-header border-bottom-blue-grey border-bottom-lighten-4" id="headingTwo">
								<a href="#" class="h6 blue" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</a>
							</div>
							<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
								<div class="card-body">
									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
									non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
									aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
									craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
									occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
									labore sustainable VHS.
								</div>
							</div>
							<div class="card-header border-bottom-blue-grey border-bottom-lighten-4" id="headingThree">
								<a href="#" class="h6 blue" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</a>
							</div>
							<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
								<div class="card-body">
									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
									non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
									aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
									craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
									occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
									labore sustainable VHS.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-md-12">
			<div class="card">
				<div class="card-content">
					<div class="card-body">
						<h4 class="card-title">Contact Form</h4>
						<h6 class="card-subtitle text-muted">Support card subtitle</h6>
					</div>
					<div class="card-body">
						<form class="form">
							<div class="form-body">
								<div class="form-group">
									<label for="donationinput1" class="sr-only">First Name</label>
									<input type="text" id="donationinput1" class="form-control" placeholder="First Name" name="fname">
								</div>
								<div class="form-group">
									<label for="donationinput2" class="sr-only">Last Name</label>
									<input type="text" id="donationinput2" class="form-control" placeholder="Last Name" name="lanme">
								</div>
								<div class="form-group">
									<label for="donationinput3" class="sr-only">E-mail</label>
									<input type="email" id="donationinput3" class="form-control" placeholder="E-mail" name="email">
								</div>

								<div class="form-group">
									<label for="donationinput4" class="sr-only">Contact Number</label>
									<input type="text" id="donationinput4" class="form-control" placeholder="Phone" name="phone">
								</div>
								<div class="form-group">
									<label for="donationinput7" class="sr-only">Message</label>
									<textarea id="donationinput7" rows="5" class="form-control square" name="message" placeholder="message"></textarea>
								</div>

							</div>
							<div class="form-actions center">
								<button type="submit" class="btn btn-outline-primary">Send</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Content types section end -->

<!-- Text Alignment section start -->
<section id="text-alignments">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Text Alignment</h4>
			<p>You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-4 col-md-12">
			<div class="card">
				<div class="card-body">
					<h4 class="card-title">Text Align Left</h4>
					<p class="card-text">Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet
						roll marzipan pastry cookie cake tootsie roll oat cake cookie.</p>
					<p class="card-text">Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake
						cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer
						tiramisu jelly beans.</p>
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-12">
			<div class="card text-center">
				<div class="card-body">
					<h4 class="card-title">Text Align Center</h4>
					<p class="card-text">Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet
						roll marzipan pastry cookie cake tootsie roll oat cake cookie.</p>
					<p class="card-text">Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake
						cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer
						tiramisu jelly beans.</p>
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-12">
			<div class="card text-right">
				<div class="card-body">
					<h4 class="card-title">Text Align Right</h4>
					<p class="card-text">Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet
						roll marzipan pastry cookie cake tootsie roll oat cake cookie.</p>
					<p class="card-text">Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake
						cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer
						tiramisu jelly beans.</p>
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Text Alignment section end -->

<!-- Navigation start -->
<section id="navigation">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Navigation</h4>
			<p>Add some navigation to a card’s header (or block) with Bootstrap’s nav components.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-6 col-md-12">
			<div class="card text-center">
				<div class="card-header">
					<ul class="nav nav-tabs">
						<li class="nav-item">
							<a class="nav-link active" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<h5 class="card-title">Special title treatment</h5>
					<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>

		<div class="col-lg-6 col-md-12">
			<div class="card text-center">
				<div class="card-header">
					<ul class="nav nav-pills card-header-pills">
						<li class="nav-item">
							<a class="nav-link active" href="#">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">Disabled</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<h5 class="card-title">Special title treatment</h5>
					<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Navigation start -->
<!-- Groups section start -->
<section id="groups">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Groups</h4>
			<p>Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups
				use
				<code>display: table;</code> and
				<code>table-layout: fixed;</code> to achieve their uniform sizing. However, enabling flexbox mode can switch that to use
				<code>display: flex;</code> and provide the same effect.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="card-group">
				<div class="card">
					<img class="card-img-top img-fluid" src="assets/images/carousel/22.jpg" alt="Card image cap" />
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
				<div class="card">
					<img class="card-img-top img-fluid" src="assets/images/carousel/23.jpg" alt="Card image cap" />
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
				<div class="card">
					<img class="card-img-top img-fluid" src="assets/images/carousel/24.jpg" alt="Card image cap" />
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Groups section end -->

<!-- Decks section start -->
<section id="decks">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Decks</h4>
			<p>Need a set of equal width and height cards that aren’t attached to one another? Use card decks. By default, card decks
				require a wrapping element:
				<code>.card-deck</code>. We use table styles for the sizing and the gutters on
				<code>.card-deck</code>. </p>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="card-deck">
				<div class="card">
					<img class="card-img-top img-fluid" src="assets/images/slider/slider-5.png" alt="Card image cap" />
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
				<div class="card">
					<img class="card-img-top img-fluid" src="assets/images/slider/slider-6.png" alt="Card image cap" />
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
				<div class="card">
					<img class="card-img-top img-fluid" src="assets/images/slider/slider-2.png" alt="Card image cap" />
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
			</div>

		</div>
	</div>
</section>
<!-- Decks section end -->

<!-- Columns section start -->
<section id="columns">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Columns</h4>
			<p>Cards can be organized into Masonry-like columns with just CSS by wrapping them in
				<code>.card-columns</code>. Only applies to small devices and above.</p>

			<p>
				<strong>Heads up!</strong> This is
				<strong>not available in IE9</strong> and below as they have no support for the column-* CSS properties.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 mt-1">
			<div class="card-columns">
				<div class="card">
					<div class="card-content">
						<img class="card-img-top img-fluid" src="assets/images/carousel/06.jpg" alt="Card image cap">
						<div class="card-body">
							<h4 class="card-title">Card title</h4>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="btn btn-outline-primary">Go somewhere</a>
						</div>
					</div>
				</div>
				<div class="card text-white bg-primary text-center">
					<div class="card-content">
						<div class="card-body pt-3">
							<img src="assets/images/elements/01.png" alt="element 01" width="190" class="float-left img-fluid">
							<h4 class="card-title mt-3 text-white">Brand Minute</h4>
							<p class="card-text">Donut toffee candy brownie soufflé macaroon.</p>
							<button class="btn btn-primary btn-darken-3">Buy Now</button>
						</div>
					</div>
				</div>
				<div class="card text-white bg-warning text-center border-0 box-shadow-0">
					<div class="card-content">
						<div class="card-body">
							<img src="assets/images/elements/04.png" alt="element 05" width="250" class="mb-1 img-fluid">
							<h4 class="card-title text-white">Storage Device</h4>
							<p class="card-text">945 items</p>
						</div>
					</div>
				</div>
				<div class="card text-white bg-success text-center border-0 box-shadow-0">
					<div class="card-content">
						<div class="card-body">
							<img src="assets/images/elements/06.png" alt="element 02" width="225" class="mb-1 img-fluid">
							<h3 class="card-title text-white">Ceramic Bottle</h3>
							<p class="card-text">456 items</p>
						</div>
					</div>
				</div>
				<div class="card border-0 box-shadow-0">
					<div class="card-content">
						<div class="card-body">
							<h4 class="card-title">Bottom Image Cap</h4>
							<p class="card-text">Jelly-o sesame snaps cheesecake topping. Cupcake fruitcake macaroon donut pastry gummies tiramisu chocolate bar muffin.
								Dessert bonbon caramels brownie chocolate bar chocolate tart dragée.</p>
							<p class="card-text">Cupcake fruitcake macaroon donut pastry gummies tiramisu chocolate bar muffin.</p>
							<p class="card-text mt-1">
								<small class="text-muted">Last updated 3 mins ago</small>
							</p>
						</div>
						<img class="card-img-bottom img-fluid" src="assets/images/carousel/15.jpg" alt="Card image cap">
					</div>
				</div>
				<div class="card text-white border-0 box-shadow-0">
					<div class="card-content">
						<img class="card-img img-fluid" src="assets/images/carousel/05.jpg" alt="Card image">
						<div class="card-img-overlay overlay-cyan">
							<h4 class="card-title text-white">Inverse Text</h4>
							<p class="card-text">Sugar plum tiramisu sweet. Cake jelly marshmallow cotton candy chupa chups carrot cake topping chupa chups.</p>
							<p class="card-text">
								<small class="text-muted">Last updated 3 mins ago</small>
							</p>
						</div>
					</div>
				</div>
				<div class="card text-white border-0 box-shadow-0">
					<div class="card-content">
						<img class="card-img img-fluid" src="assets/images/carousel/09.jpg" alt="Card image">
						<div class="card-img-overlay overlay-blue-grey">
							<h4 class="card-title text-white">Inverse Text</h4>
							<p class="card-text">Sugar plum tiramisu sweet. Cake jelly marshmallow cotton candy chupa chups carrot cake topping chupa chups.</p>
							<p class="card-text">
								<small class="text-muted">Last updated 3 mins ago</small>
							</p>
						</div>
					</div>
				</div>
				<div class="card border-info text-center box-shadow-0 bg-transparent">
					<div class="card-content">
						<img src="assets/images/elements/07.png" alt="element 04" width="210" class="float-left mt-3 img-fluid">
						<div class="card-body pt-3">
							<h4 class="card-title mt-3">New Arrival</h4>
							<p class="card-text">Donut toffee candy brownie soufflé macaroon.</p>
							<button class="btn btn-info">Buy Now</button>
						</div>
					</div>
				</div>
				<div class="card border-0 box-shadow-0">
					<div class="card-content">
						<img class="card-img img-fluid" src="assets/images/carousel/02.jpg" alt="Card image cap" />
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Columns section end -->


<!-- Card bg options section start -->
<section id="card-bg-options">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Card Background Variants</h4>
			<p>Cards include their own variant classes for quickly changing the
				<code>background-color</code> and
				<code>border-color</code> of a card.
				<strong>Darker colors require the use of</strong>
				<code>.text-white</code>.</p>
		</div>
	</div>

	<div class="row">
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card text-white box-shadow-0 bg-info">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title text-white">Info Background</h4>
						<p class="card-text">Use
							<code>bg-info</code> class</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card text-white box-shadow-0 bg-danger">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title text-white">Danger Background</h4>
						<p class="card-text">Use
							<code>bg-danger</code> class</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card text-white box-shadow-0 bg-gradient-x-primary">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title text-white">Horizontal Gradient</h4>
						<p class="card-text">Use
							<code>.bg-gradient-x-*</code> class</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card text-white box-shadow-0 bg-gradient-y-warning">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title text-white">Vertical Gradient</h4>
						<p class="card-text">Use
							<code>.bg-gradient-y-*</code> class</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- // Card bg options section end -->

<!-- Card border options section start -->
<section id="card-border-options">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Card Border Variants</h4>
			<p>Cards include their own variant classes for quickly changing the
				<code>border-color</code> of a card. Use
				<code>.bg-transparent</code> to remove background color.</p>
		</div>
	</div>

	<div class="row">
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card box-shadow-0 border-info">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title">Info Border</h4>
						<p class="card-text">Use
							<code>border-info</code> class</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card box-shadow-0 border-danger bg-transparent">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title">Danger Border</h4>
						<p class="card-text">Use
							<code>border-danger bg-transparent</code> classes</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card box-shadow-0 border-primary">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title">Primary Border</h4>
						<p class="card-text">Use
							<code>border-primary</code> class</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-md-6 col-sm-12">
			<div class="card box-shadow-0 border-warning bg-transparent">
				<div class="card-content collapse show">
					<div class="card-body">
						<h4 class="card-title">Warning Border</h4>
						<p class="card-text">Use
							<code>border-warning bg-transparent</code> class</p>
						<p class="card-text">Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. </p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- // Card border options section end -->

<!-- Card Headings section start -->
<section id="card-headings">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Card Headings</h4>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header" id="heading-links">
					<h4 class="card-title">With Links</h4>
					<a class="heading-elements-toggle">
						<i class="la la-ellipsis-v font-medium-3"></i>
					</a>
					<div class="heading-elements">
						<a href="#" class="success">Link 1</a>
						<a href="#" class="danger">Link 2</a>
						<a href="#" class="info">Link 3</a>
					</div>
				</div>
				<div class="card-body">
					<h4 class="card-title">Content title</h4>
					<p class="card-text">Add links in
						<code>.heading-element</code> div. That will set links on right side of the header.</p>
					<p class="card-text">Caramels lemon drops tootsie roll toffee. Gummi bears macaroon fruitcake sesame snaps dessert sugar plum lollipop donut
						jelly-o. Croissant wafer bonbon sweet cake icing chocolate oat cake lemon drops.</p>
					<p class="card-text">Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu
						jelly beans.</p>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title" id="heading-multiple-thumbnails">Multiple Thumbnail</h4>
					<a class="heading-elements-toggle">
						<i class="la la-ellipsis-v font-medium-3"></i>
					</a>
					<div class="heading-elements">
						<span class="avatar">
							<img src="assets/images/portrait/small/avatar-s-2.png" alt="avatar">
						</span>
						<span class="avatar">
							<img src="assets/images/portrait/small/avatar-s-3.png" alt="avatar">
						</span>
						<span class="avatar">
							<img src="assets/images/portrait/small/avatar-s-4.png" alt="avatar">
						</span>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<h4 class="card-title">Content title</h4>
						<p class="card-text">Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet
							roll marzipan pastry cookie cake tootsie roll oat cake cookie.</p>
						<p class="card-text">Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake
							cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow
							wafer tiramisu jelly beans.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

</section>
<!-- // Card Headings section end -->
        </div>
      

<script type="text/javascript">

</script>